<template>
	<view class="content page">
		<view class="rechMoney">
			<view class="rechTitle">充值金额</view>
			<view class="rechNum">
				<text>￥</text><input type="digit" v-model="inputNum" @input="getRechargeAct"
					:class="inputNum != ''?'rechInput':'rechNumInput'" placeholder="请输入充值金额" />
			</view>
			<view class="rechTip" v-if="inputNum != ''">
				<image class="loadingImg" :src="staticUrl+'/images/loading.gif'" v-if="loading" mode=""></image>
				<view v-else>
					<view v-if="RechargeData.aesId != 0">
						充值<text>{{RechargeData.restrict.limit}}元</text>
						赠送<text v-if="RechargeData.type == 8">{{RechargeData.restrict.money}}元</text>
						<text v-if="RechargeData.type == 9">{{RechargeData.restrict.money}}积分</text>
						<text v-if="RechargeData.type == 10">{{RechargeData.typeTitle}}</text>
					</view>
					<view v-if="RechargeData.aesId == 0">{{RechargeData.typeTitle}}</view>
				</view>
			</view>
		</view>
		<view class="rechType rule" v-if="rechData.rechargeRule">
			<view class="rechTitle">充值规则</view>
			<mp-html :content="rechData.rechargeRule" lazy-load scroll-table selectable use-anchor
				show-with-animation />
		</view>
		<view class="rechType rechType1">
			<view class="rechTitle">充值方式</view>
			<view class="rechTypeList">

				<label class="radio">

					<image class="pay-ico" :src="staticUrl+'/images/weixinPay.png'" mode="widthFix"></image>
					<view class="radioText">微信支付</view>
				</label>


			</view>
		</view>
		<view class="submitBtn thmeBg" :class="{active:inputNum==''||isIOS}" :style="{'--color': color}"
			@click="submits">立即充值</view>

		<showModel v-if='showModal' @cancelFunc='closeModel' type='99' @certain='closeModel' title='充值成功 !' msg='是否继续充值'
			btn3='返回首页' btn2='确定'></showModel>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	var that;
	export default {
		data() {
			return {


				staticUrl: this.staticUrl,
				inputNum: '',
				checkedSelect: 1,
				rechTip: false,
				loading: true,
				RechargeData: '',
				aesid: '',
				aesverifycode: '',
				pay_type: 1,
				showModal: false,
				rechData: '',
				isIOS: false, // 是否ios系统
			}
		},
		onShow() {
			let that = this;

			let options = wx.getEnterOptionsSync();
			if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3') {
				let extraData = options.referrerInfo.extraData;
				if (!extraData) return;
				if (extraData.code == 'success') {
					that.showModal = true
				}
			}

		},


		onLoad(e) {
			that = this
			if (e.inputNum) {
				that.inputNum = e.inputNum
				that.getRechargeAct()
			}
			that.getConfig()
		},
		computed: {
			...mapState(['vid', 'color', 'bid']),
		},
		methods: {
			closeModel() {
				that.showModal = false;
				that.inputNum = ''
				// uni.navigateTo({
				// 	url: "/pages/index/index"
				// })
			},

			submits() { //立即充值

				if (that.inputNum == '') return
				this.$showLoading('请稍后~~')

				that.$http.post({
					url: '/SRA_memberRecharge/recharge',
					data: {
						VeriCode: that.bid,
						vId: that.vid,
						money: that.inputNum,
						aesId: that.aesid,
						aesVerifyCode: that.aesverifycode,
						payType: that.pay_type
					}
				}).then(res => {
					this.$hideLoading()
					if (res.code != 100) return this.$Toast(res.msg)
					var data = res.data;
					if (data.extraData) {
						uni.hideLoading()
						wx.openEmbeddedMiniProgram({
							appId: data.appId,
							extraData: data.extraData
						});
					} else {
						uni.getProvider({
							service: 'oauth',
							success: function(resp) {
								if (resp.provider) {
									uni.requestPayment({
										provider: resp.provider[0],
										orderInfo: data,
										timeStamp: data.timeStamp,
										nonceStr: data.nonceStr,
										package: data.package,
										signType: data.signType,
										paySign: data.paySign,
										success: function(res) {
											that.showModal = true
										},
										fail: function(err) {
											console.log('fail:' + JSON.stringify(err));

										},
										complete: function(res) {
											uni.hideLoading()
										}
									})
								}
							}
						})
					}

				})
			},
			getRechargeAct() { //获取当前充值金额能有的优惠
				that.loading = true
				setTimeout(() => {
					that.$http.post({
						url: '/SRA_memberRecharge/getRechargeAct',
						data: {
							VeriCode: that.bid,
							vId: that.vid,
							money: that.inputNum,
						}
					}).then(res => {
						if (res.code == 100) {
							that.RechargeData = res.data
							that.loading = false
							that.aesid = that.RechargeData.aesId
							that.aesverifycode = that.RechargeData.aesVerifyCode
						} else {
							uni.showToast({
								icon: "none",
								title: res.notice,
								duration: 2000
							})
						}
					})
				}, 300)
			},
			getConfig() { //获取用户充值配置
				that.$http.post({
					url: '/SRA_memberRecharge/config',
					data: {
						VeriCode: that.bid,
						vId: that.vid,
					}
				}).then(res => {
					if (res.code == 100) {
						that.rechData = res.data
					} else {
						uni.showToast({
							icon: "none",
							title: res.notice,
							duration: 2000
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100vh;
		color: #333333;
		font-size: 28upx;
	}

	.rechMoney {
		width: 100%;
		height: 240upx;
		background: #FFFFFF;
		border-bottom: 1px solid #e6e6e6;
		padding: 30upx;
		/* margin-bottom: 30upx; */
	}

	.rechNum {
		margin-top: 30upx;
		width: 100%;
	}

	.rechNum text {
		font-size: 40upx;
		line-height: 54upx;
	}

	.rechInput {
		font-size: 60upx;
		border: none;
		background: none;
		outline: none;
		width: 94%;
		float: right;
		height: 64upx;
		margin-top: -8upx;
	}

	.rechNumInput {
		border: none;
		background: none;
		outline: none;
		width: 94%;
		float: right;
		height: 64upx;
		margin-top: -8upx;
	}

	.rechType {
		width: 100%;
		border-bottom: 1px solid #e6e6e6;
		border-top: 1px solid #e6e6e6;
		padding: 30upx;
		background: #FFFFFF;
		padding-right: 0;
		padding-bottom: 0;
	}

	.rechTypeList {
		width: 100%;
		margin-top: 30upx;
	}

	.radio {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		padding-bottom: 20upx;
	}

	.radio .pay-ico {
		width: 48upx;
		height: 48upx;
		margin: 0 4upx 0 10upx;
	}

	.rechTip {
		text-align: center;
		color: #999999;
		width: 100%;
		margin-top: 30upx;
	}

	.rechTip text {
		color: #FF616C;
		margin: 0 10upx;
	}

	.submitBtn {
		width: calc(100% - 60upx);
		margin: 30upx;
		padding: 30upx 0;
		text-align: center;
		border-radius: 10upx;
		margin-top: 30upx;
		color: #FFFFFF;
	}

	.active {
		background: #DEDEDE !important;
		color: #949494;
	}

	.rechTypeList:last-child .radioText {
		border: none;
	}

	.loadingImg {
		width: 40upx;
		height: 40upx;
	}

	.rule {
		padding-right: 30upx;
		padding-bottom: 30upx;
		border-top: none;
		color: #949494;
	}

	.rechType1 {
		margin-top: 30upx;
	}
</style>